<template>
  <div>
    <el-card>
      <h2>UserManagent</h2>
      <el-row style="margin: 2px 0">
        <el-col span="6">
          <el-button type="primary" size="mini" @click="handleCreate()">{{ "Add UserInfo" }}</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>

      <el-table
        :data="userData"
        border
      >
        <el-table-column label="Username">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Gender">
          <template slot-scope="scope">
            <span>{{ scope.row.gender }}</span>
          </template>
        </el-table-column>
        <el-table-column label="Operation" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              {{ "edit" }}
            </el-button>
            <el-button type="success" size="mini" @click="showDetail(row)">
              {{ "detail" }}
            </el-button>
            <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row)">
              {{ "delete" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="detailVisible" title="User Course Detail">
        <el-table :data="detailData" border fit highlight-current-row style="width: 100%">
          <el-table-column prop="language" label="Language">
            <template slot-scope="scope">
              <span>{{ scope.row.language }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastestTour" label="LastestTour">
            <template slot-scope="scope">
              <span>{{ scope.row.lastestTour }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastestUnit" label="LastestUnit">
            <template slot-scope="scope">
              <span>{{ scope.row.lastestUnit }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="correctRate" label="CorrectRate">
            <template slot-scope="scope">
              <span>{{ scope.row.correctRate }}</span>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailVisible = false">{{ "confirm" }}</el-button>
        </span>
      </el-dialog>

      <el-dialog :title="judges[formStatus]" :visible.sync="addOrEditVisible">
        <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
          <el-form-item :label="$t('Username')" prop="title">
            <el-input v-model="temp.username" />
          </el-form-item>
          <el-form-item :label="$t('Gender')">
            <el-select v-model="temp.gender" class="filter-item" placeholder="Please select">
              <el-option v-for="item in genderStatus" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addOrEditVisible = false">
            {{ "cancel" }}
          </el-button>
          <el-button type="primary" @click="formStatus==='create'?createData():updateData()">
            {{ "confirm" }}
          </el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { getData }
  from '@/api/userManage/userManage.js'
export default {
  name: 'UserManage',
  data() {
    return {
      userData: [],
      detailVisible: false,
      addOrEditVisible: false,
      detailData: [],
      genderStatus: ['male', 'female'],
      judges: {
        update: 'Edit',
        create: 'Create'
      },
      temp: {},
      formStatus: ''
    }
  },
  created() {
    this.getUserData()
  },
  methods: {
    async getUserData(params) {
      const res = await getData(params)
      // console.log(res)
      this.userData = res.users
    },
    showDetail(row) {
      this.detailData = row.course
      // console.log(this.detailData)
      this.detailVisible = true
    },
    handleCreate() {
      this.formStatus = 'create'
      this.addOrEditVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.formStatus = 'update'
      this.addOrEditVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleDelete(row) {
      this.$notify({
        title: '成功',
        message: '删除成功',
        type: 'success',
        duration: 2000
      })
    }
  }
}
</script>
